/*
 * @Author: liang.jirong
 * @Date: 2022-04-21 17:22:33
 * @Email: liang.jirong@foxmail.com
 * @LastEditors: liang.jirong
 * @LastEditTime: 2022-06-02 18:01:18
 * @Description: file information
 * @Company: zzsoft
 */

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';

import Board from './Board';


class Referee{

  /**
   * 裁决
   *  1、横向、纵向、45度方向有连续4子且两端均可落子或五子连珠方获胜
   *  2、横向、纵向、45度方向五子连珠方胜
   * 棋盘边缘 1~size、(sise-1)*size~size*size、index%size==1、index%size==size
   * @return false|'X'|'O'
   * */
  static judge(index, board, size) {
    // 八个方向的棋子数
    // 横向
    let leftRight = 0;
    let topBottom = 0;
    let degree45 = 0;

    // 上方
    for (let i = index; i >= 0; i--){
      if (i%size === index%size && board[i] === board[index] && board[i-size] === board[index]){
        topBottom++;
      }     
    }

    // 下方
    for (let i = 0; i < size*size; i++){
      if (i%size === index%size && board[i] === board[index] && board[i+size] === board[index]){
        topBottom++;
      }     
    }

    // 左方
    for (let i = index; i > (index-index)%size; i--){
      if (board[i] === board[index] && board[i] === board[i-1]){
        topBottom++;
      }     
    }

    // 右方
    for (let i = index; i > (index-index)%size; i--){
      if (board[i] === board[index] && board[i] === board[i-1]){
        topBottom++;
      }     
    } 
    
    // 右上

    // 左下


    console.log(leftRight, topBottom, degree45);

    if(leftRight >= 5 || topBottom >= 5 || degree45 >= 5){
      return board[index];
    }

    return false;
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      timer:null,
      line: 120,
      boardSize: 9,                        // 棋盘大小
      history: [                            // 落子历史
        { squares: Array(9).fill(null) }
      ],
      xIsNext: true,                        // 是否该黑棋走棋
      countDownTime:20,
      gameInfo: ''
    };
  }

  restart(judge) {

  }

  giveUp(){
    this.restart();
  }

  // 棋盘变化时裁决是否有人获胜，若无，让对手落子
  boardOnChange(idx, board) {
    const judge = Referee.judge(idx, board, this.state.boardSize);
    if (judge) {
      setTimeout(() => {
        alert('玩家【' + judge + '】获胜！');
        
        this.restart(judge);
      }, 100);      

      return;
    }

    this.setState({ xIsNext: !this.state.xIsNext });
    this.countDown();
  }

  countDown(){
    if(this.timer){
      clearInterval(this.timer);
    }

    let countDownTime = 20;
    this.timer = setInterval(() => {
      if(countDownTime <= 0){
        this.setState({ xIsNext: !this.state.xIsNext });
        this.countDown();
        return;
      }

      countDownTime--;
      this.setState({countDownTime:countDownTime});
    }, 1000);
  }

  componentDidMount(){
    this.countDown();
  }

  render() {
    return (
      <div className='game'>
        <p className="game-name">欢乐五子棋</p>
        <Board data={this.state} 
          boardOnChange={(idx, squares) => { this.boardOnChange(idx, squares) }} 
          giveUp={() => {this.giveUp()}}  
        />

        <div className='game-info'>
          剩余思考时间：<b>{this.state.countDownTime}</b>秒
        </div>
      </div>
    )
  }
}


// ========================================

createRoot(document.getElementById('root')).render(
  <Game />
);

